<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <h2>使用key来管理状态</h2>
    <!-- 由于vue的性能的考虑，当它发现需要切换的元素只有属性不同的时候 -->
    <!-- 那么vue不会去销毁元素并且重新创建，而是直接复用了那个元素 -->
    <input type="text" v-if="show" placeholder="青输入用户名" key="1">
    <input type="password" v-else placeholder="青输入密码" key="2">
    <button v-on:click="show = !show">btn</button>


    <hr>


    <ul>
      <!-- 每一个v-for的循环，都必须加上key属性 -->

      <!-- key是为了让vue在页面重新渲染的时候，让它找到更新前相同的元素进行复用，提高更新的效率，提高性能。就不需要销毁元素并且重新生成了 -->
      <!-- key是唯一不能重复的 -->
      <!-- key只能使用数字和字符串 -->
      <!-- key尽力不要使用index -->
      <!-- 最佳的实践是用数据库的主键作为key的值 -->
      <li v-for="(item, index) in list" :key="index">{{ item }}</li>
    </ul>

    <!-- vue有一个diff算法，为了时间复杂度考虑。它做了同级比较 -->
    <!-- 并列的元素的key不能重复 -->
    <ul>
      <li v-for="(item, index) in 5" :key="index">{{ item }}</li>
    </ul>
  </div>


  <script src="../vue2.js"></script>
  <script>
    // const {createApp} = Vue;
    new Vue({
      data() {
        return {
          show: true,
          list: ["张三", "里斯", "王武"]
        }
      }
    }).$mount("#app");
  </script>
</body>
</html>